<template>
  <div class="content_box">
    <VHeader :list-data="interimListData" :option-config="option" @change="search">
      <el-button circle icon="el-icon-delete" @click="deleteData('/deleteMajors.do', deleteArr)" />
      <el-button circle icon="el-icon-plus" @click="addViews = true" />
      <el-button circle icon="el-icon-refresh-right" @click="getListData" />
    </VHeader>
    <el-dialog :visible.sync="addViews" destroy-on-close title="创建专业" width="30%">
      <el-form :model="add_data" :rules="add_rules" label-position="left" label-width="80px" @submit.native.prevent>
        <el-form-item label="专业名称" prop="major_name">
          <el-input v-model="add_data.major_name" clearable />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="add_data.status" />
        </el-form-item>
        <el-form-item>
          <el-button :disabled="!add_data.major_name" type="primary" @click="addData">创建专业
          </el-button>
          <el-button @click="addRe">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog :visible.sync="editViews" destroy-on-close title="修改专业" width="30%">
      <el-form :model="editData" :rules="add_rules" label-position="left" label-width="80px" @submit.native.prevent>
        <el-form-item label="专业名称" prop="major_name">
          <el-input v-model="editData.major_name" clearable />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="editData.status" />
        </el-form-item>
        <el-form-item>
          <el-button :disabled="!editData.major_name" type="primary" @click="upData">修改
          </el-button>
          <el-button @click="addRe">清除</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <VTable
      :list-data="listData[pageConfig.Page - 1]"
      :loading="loading"
      :table-config="tableConfig"
      @select-change="selectChange"
    >
      <template v-slot:operate="scope">
        <el-button-group>
          <el-button icon="el-icon-edit" type="primary" @click="showUpData(scope.data.row)" />
          <el-button
            icon="el-icon-delete"
            type="primary"
            @click="deleteData('/deleteMajors.do', [{ key: scope.data.row.key }])"
          />
        </el-button-group>
      </template>
    </VTable>
    <el-pagination
      :current-page.sync="pageConfig.Page"
      :size-change="pageConfig.size"
      :total="pageConfig.total"
      background
      class="Pagination"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="pageSizeChange"
      @current-change="setPage"
    />
  </div>
</template>

<script>
import { addMajorsApi, majorsListApi, upMajorsApi } from '@/api/table'
// 引入公共函数
import { deleteData, pageSizeChange, tableDataProcess } from '@/utils/diy_funtion'

export default {
  name: 'Majors',
  data() {
    return {
      listData: [],
      interimListData: [],
      loading: true,
      tableConfig: {
        table_show: {
          key: 'ID',
          add_time: '创建时间',
          major_name: '专业名'
        },
        sortable: { key: true },
        status: true,
        selection: true,
        align: 'center',
        operate: true
      },
      option: {
        option_name: ['ID', '专业'],
        object_name: ['key', 'major_name']
      },
      addViews: false,
      add_data: { major_name: '', status: false },
      add_rules: {
        major_name: [
          { required: true, message: '请输入专业名称', trigger: 'blur' }
        ]
      },
      deleteArr: [],
      editViews: false,
      editData: {},
      pageConfig: {
        total: 1,
        Page: 1,
        size: [10, 20, 50, 100],
        pagesSize: 10
      }
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    getListData() {
      this.loading = true
      majorsListApi().then(response => {
        const { newListData, data } = tableDataProcess(response.data.data, this.pageConfig.pagesSize)
        setTimeout(() => {
          this.loading = false
        }, 500)
        this.pageConfig.total = data.length
        this.listData = newListData
        this.interimListData = data
      })
    },
    // 表多选时
    selectChange(v) {
      this.deleteArr = v
    },
    // 显示修改弹窗
    showUpData(data) {
      this.editData = {}
      // 对象深拷贝
      this.editData = JSON.parse(JSON.stringify(data))
      this.editViews = true
    },
    deleteData: deleteData,
    addData() {
      if (this.add_data.status) {
        this.add_data.status = 1
      } else {
        this.add_data.status = 0
      }
      addMajorsApi({
        status: this.add_data.status,
        major_name: this.add_data.major_name
      }).then(response => {
        this.getListData()
        this.add_data = {}
        this.addViews = false
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      })
    },
    // 修改
    upData() {
      if (this.editData.status) {
        this.editData.status = 1
      } else {
        this.editData.status = 0
      }
      const nweData = {
        key: this.editData.key,
        major_name: this.editData.major_name,
        status: this.editData.status
      }

      upMajorsApi(nweData).then((response) => {
        this.$message({
          message: response.data.msg,
          type: 'success'
        })
      })
      this.editViews = false
      this.getListData()
    },
    addRe() {
      this.add_data = {}
      Object.keys(this.editData).forEach(item => {
        if (item !== 'key') this.editData[item] = null
      })
    },
    pageSizeChange: pageSizeChange,
    setPage(v) {
      this.pageConfig.Page = v
    },
    // 搜索
    search(value) {
      this.listData = value.data
      this.pageConfig.total = value.total
    }
  }
}
</script>

<style scoped>
</style>
